<script >
import axios from "axios";
import { EventBus } from '../eventBus';
export default {
  name : 'MainPage',



  data() {
    return {

      users: [],
      categories :[],

      dialogFormVisible: false,
      dialogFormVisible1: false,
      form: {
        name: '',
        price: '',
        stock: '',
        region: '',
        date1: '',
        brand: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px'
    }
  },
  props: {
    msg: String,
    user: {
      type: Object,
      required: true
    }

  },
  mounted() {
    console.log('Component mounted.')
    this.loadAllUser();
    EventBus.$on('updateUsers', this.updateUsers); // 监听事件
  },
  methods: {
    loadAllUser() {
      console.log('loadAllUser.')
      let url2 = 'https://youxuan-zua-api.tulan.wang/admin/ysf-categories/page?size=20'
      axios.get(url2).then(res1 => {
        let result1 = res1.data;
        this.categories = result1.data
      })

      let url = "https://youxuan-zua-api.tulan.wang/admin/ysf-products/page"
      axios.get(url).then(res => {
        let result = res.data;
        console.log(result)
        this.users = result.data;
        console.log(this.users)
        return this.users
      })
    },
    updateUsers(newUsers) {
      this.users = newUsers; // 更新 users 数据
    },
    sentdata (){
      const params ={
        "categoriesId": this.form.region,

        "productsBrands": this.form.brand,

        "productsName": this.form.name,
        "productsPrice": this.form.price,
        "productsStock": this.form.stock
        }
      let url = "https://youxuan-zua-api.tulan.wang/admin/ysf-products/add"
      axios.post(url,params)
      this.dialogFormVisible = false
      alert('添加成功')
      this.loadAllUser();

    },
    sentdata1 (){
      const params1 ={
        "categoriesName": this.form.name,
      }
      let url = "https://youxuan-zua-api.tulan.wang/admin/ysf-categories/add"
      axios.post(url,params1)
      this.dialogFormVisible1 = false
      alert('添加成功')
      // this.form.name = null;
      this.loadAllUser();
      let url2 = 'https://youxuan-zua-api.tulan.wang/admin/ysf-categories/page?size=20'
      axios.get(url2).then(res1 => {
        let result1 = res1.data;
        this.categories = result1.data;
      EventBus.$emit('updatecate', this.categories);})
    }
  }
}
</script>

<template>
  <div>
    <el-button type="text" @click="dialogFormVisible = true">添加商品</el-button>

    <el-dialog title="添加商品" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品品牌" :label-width="formLabelWidth">
          <el-input v-model="form.brand" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" :label-width="formLabelWidth">
          <el-input v-model="form.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品库存" :label-width="formLabelWidth">
          <el-input v-model="form.stock" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="商品类别" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择商品类别" >
            <el-option
                v-for="category in categories"
                :key="category.categoriesId"
                :label="category.categoriesName"
                :value="category.categoriesId"
            ></el-option>

          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sentdata">确 定</el-button>
      </div>
    </el-dialog>

    <el-button type="text" @click="dialogFormVisible1 = true" style="margin-left: 20px">添加商品类别</el-button>
    <el-dialog title="添加商品类别" :visible.sync="dialogFormVisible1">
      <el-form :model="form">
        <el-form-item label="类别名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="sentdata1">确 定</el-button>
      </div>
    </el-dialog>


      <table>
        <tr>
          <th>商品名称</th>
          <th>商品品牌</th>
          <th>商品价格</th>
          <th>操作</th>
        </tr>
        <tr v-for="user in users" :key="user.productsId">
          <td>{{ user.productsName }}</td>
          <td>{{ user.productsBrands }}</td>
          <td>{{ user.productsPrice }}元</td>
          <td><el-button type="primary" plain>购买</el-button></td>
        </tr>

      </table>


  </div>

</template>

<style scoped>
table{
width: 100%;
border-collapse: collapse;
}

th, td {
  border: 1px solid #ccc; /* 添加边框 */
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2; /* 可选：给表头添加背景色 */
}
</style>